<template>
  <el-form ref="formobj" :model="lyform" :rules="rules" label-width="100px">
    <el-form-item label="科室" prop="deptmentId">
      <el-select v-model="lyform.deptmentId" placeholder="请选择所在科室" filterable><!--下拉框-->
        <el-option
          v-for="item in editorData.depts"
          :key="item.id"
          :label="item.name"
          :value="item.id"></el-option> <!--下拉框选项-->
      </el-select>
    </el-form-item>
    <el-form-item label="挂号级别" prop="registLevelId">
      <el-select v-model="lyform.registLevelId" placeholder="请选择挂号级别" filterable>
        <el-option
          v-for="item in editorData.regists"
          :key="item.id"
          :label="item.name"
          :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="排班" prop="schedulingId">
      <el-select v-model="lyform.schedulingId" placeholder="请选择排班" filterable>
        <el-option
          v-for="item in editorData.schedulings"
          :key="item.id"
          :label="item.ruleName"
          :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="姓名" prop="realname">
      <el-input v-model="lyform.realname" maxlength="20" placeholder="请输入员工姓名"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="lyform.phone" maxlength="15" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <el-form-item label="电子信箱" prop="email">
      <el-input v-model="lyform.email" maxlength="64" placeholder="请输入电子信箱"></el-input>
    </el-form-item>
    <el-form-item label="登录密码" prop="password">
      <el-input v-model="lyform.password"  placeholder="请输入登录密码" show-password></el-input><!--show-password 隐藏显示密码-->
    </el-form-item>
    <el-form-item label="头像" prop="file">
      <el-upload
        action="#"
        list-type="picture-card"
        :limit="1"
        :auto-upload="false"
        :on-change="changeFile"
        :on-remove="removeFile">
        <el-icon><Picture /></el-icon> <!-- 图标 -->
      </el-upload><!-- 上传组件 -->
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { post, get } from '@/utils/axios';
import { ElMessage } from 'element-plus';
import { Picture } from '@element-plus/icons-vue'
import { url } from './api'
getEditData()
const props = defineProps(['id'])
if(props.id){
  getById()
}
const editorData = reactive({
  depts: [],
  regists: [],
  schedulings: []
})
const lyform = reactive({
  deptmentId: null,
  registLevelId: null,
  schedulingId: null,
  realname: '',
  phone: '',
  email: '',
  password: '',
  file: null
})
const emits = defineEmits(['update:show', 'getTableData'])
const rules = reactive({
  deptmentId: [
    { required: true, message: '请选择所在科室', trigger: 'blur' },
  ],
  registLevelId: [
    { required: true, message: '请选择挂号级别', trigger: 'blur' },
  ],
  schedulingId: [
    { required: true, message: '请选择班次', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^(13[0-9]|14[5|7|9]|15[0-3|5-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[8|9])\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' },
    { validator: (rule, value, callback) => { check(rule, value, callback, 'phone') }, message: '该手机号已经存在', trigger: 'blur'  }
  ],
  realname: [
    { required: true, message: '请输入员工姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入电子信箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的电子信箱', trigger: 'blur' },
    { validator: (rule, value, callback) => { check(rule, value, callback, 'email') }, message: '该电子邮箱已经存在', trigger: 'blur'  }
  ],
  password: [
    { required: true, message: '请输入登录密码', trigger: 'blur' }
  ],
  file: [
    { required: true, message: '请上传员工头像', trigger: 'blur' }
  ]
})
const formobj = ref()
function getById(){
  get(url.getById, { id: props.id }, content => {
    for(let key in lyform){   /// 使用循环赋值
      if(Object.prototype.hasOwnProperty.call(content, key)){// 判断是否是自身属性
        lyform[key] = content[key]
      }
    }
    lyform.id = props.id
  })
}
function save () {
  post(props.id ? url.update : url.add, lyform, content => { //异步操作
    emits('update:show', false)
    emits('getTableData')
  }, formobj)
}
function check (rule, value, callback, field) {
  get(url.check, { field, value, id: props.id }, content => {
    if (content) {
      callback()
    } else {
      callback(new Error())
    }
  })
}
function getEditData () {
  get(url.getEditData, {}, content => {
    editorData.depts = content.depts
    editorData.regists = content.regists
    editorData.schedulings = content.schedulings
  })
}
function changeFile (file) {
  lyform.file = file.raw
}
function removeFile () {
  lyform.file = null
}
</script>

<style lang="scss" scoped>
</style>